<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
  <title>Zmind-B站数据看板</title>
  <!-- layui -->
  <link rel="stylesheet" href={{ url_for('static', filename='css/layui.css' ) }}>
  <script src={{ url_for('static', filename='js/layui.js' ) }}></script>
  <!-- bootstrap -->
  <link rel="stylesheet" href={{ url_for('static', filename='css/bootstrap.css' ) }}>
  <script src={{ url_for('static', filename='js/bootstrap.js' ) }}></script>
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar navbar-default" style="border-radius: 0;">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Zmind</a>
        <p class="navbar-text">B站数据看板</p>
      </div>
      <!-- 根据mid搜索 -->
      <form class="navbar-form navbar-left" method="get" action="/">
        <div class="form-group">
          <input type="text" name="mid" class="form-control" placeholder="输入哔哩哔哩用户mid">
        </div>
        <button type="submit" class="btn btn-default">统计</button>
      </form>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="/">开发：雨江</a></li>
      </ul>
    </div><!-- /.container-fluid -->
  </nav>

  <!-- 用户信息 -->
  <div class="layui-col-md12" style="margin: -20px 0 20px 0">
    <div class="layui-panel">
      <div style="padding: 5px;">
        <table class="table" style="margin-bottom: 0;">
          <thead>
            <tr>
              <th>B站MID</th>
              <th>名字</th>
              <th>性别</th>
              <th>签名</th>
              <th>粉丝数</th>
              <th>生日</th>
              <th>级别</th>
              <th>会员</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ user_data.mid }}</td>
              <td>{{ user_data.name }}</td>
              <td>{{ user_data.sex }}</td>
              <td>{{ user_data.sign }}</td>
              <td>{{ user_data.total }}</td>
              <td>{{ user_data.birthday }}</td>
              <td>{{ user_data.level }}</td>
              <td>{{ user_data.vip }}</td>
            </tr>
            <tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


  <!-- 总数据 -->
  <div class="row" style="padding: 0 20px 0 20px">
    <div class="col-md-2">
      <div class="panel panel-info">
        <div class="panel-heading">总播放量</div>
        <div class="panel-body">
          {{ user_video_data.view }}
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="panel panel-info">
        <div class="panel-heading">总投币数</div>
        <div class="panel-body">
          {{ user_video_data.coin }}
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="panel panel-info">
        <div class="panel-heading">总点赞数</div>
        <div class="panel-body">
          {{ user_video_data.like }}
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="panel panel-info">
        <div class="panel-heading">总弹幕数</div>
        <div class="panel-body">
          {{ user_video_data.danmaku }}
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="panel panel-info">
        <div class="panel-heading">总评论数</div>
        <div class="panel-body">
          {{ user_video_data.reply }}
        </div>
      </div>
    </div>
    <div class="col-md-1">
      <div class="panel panel-info">
        <div class="panel-heading">总收藏数</div>
        <div class="panel-body">
          {{ user_video_data.favorite }}
        </div>
      </div>
    </div>
    <div class="col-md-1">
      <div class="panel panel-info">
        <div class="panel-heading">总转发数</div>
        <div class="panel-body">
          {{ user_video_data.share }}
        </div>
      </div>
    </div>
  </div>

  <!-- 数据表格 -->
  <table id="table_data" lay-filter="test" style="margin-top: -10px;"></table>
  <script>
    layui.use('table', function () {
      var table = layui.table;

      table.render({
        elem: '#table_data',
        height: 630,
        url: '/get_video_data', //数据接口
        page: false, //开启分页
        cols: [[ //表头
          { field: 'title', title: '标题', sort: true },
          {
            field: 'pubdate', title: '发布日期', sort: true, templet: function (d) {
              return '<span>' + d.pubdate + '</span>'
            }
          },
          {
            field: 'length', title: '时长', sort: true, templet: function (d) {
              return '<span class="label label-default">' + d.length + '</span>'
            }
          },
          {
            field: 'play', title: '播放量', sort: true, templet: function (d) {
              return '<span class="label label-success">' + d.play + '</span>'
            }
          },
          {
            field: 'like', title: '点赞数', sort: true, templet: function (d) {
              return '<span class="label label-primary">' + d.like + '</span>'
            }
          },
          {
            field: 'coin', title: '投币数', sort: true, templet: function (d) {
              return '<span class="label label-danger">' + d.coin + '</span>'
            }
          },
          {
            field: 'danmaku', title: '弹幕数', sort: true, templet: function (d) {
              return '<span class="label label-info">' + d.danmaku + '</span>'
            }
          },
          {
            field: 'reply', title: '评论数', sort: true, templet: function (d) {
              return '<span class="label label-info">' + d.reply + '</span>'
            }
          },
          {
            field: 'favorite', title: '收藏数', sort: true, templet: function (d) {
              return '<span class="label label-warning">' + d.favorite + '</span>'
            }
          },
          {
            field: 'share', title: '转发数', sort: true, templet: function (d) {
              return '<span class="label label-primary">' + d.share + '</span>'
            }
          },
          { field: 'description', title: '详情', sort: true },
          {
            field: 'bvid', title: '跳转', templet: function (d) {
              return '<div><a href="https://www.bilibili.com/video/' + d.bvid +
                '" class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" target="_blank">跳转</a></div>'
            }
          }
        ]]
      });

    });
  </script>
</body>

</html>